<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calendar</title>
    <!-- https://echarts.apache.org/examples/zh/editor.html?c=calendar-heatmap -->

    <script src="/s/js/lib/jquery.min.js"></script>
    <script src="/s/js/lib/echarts.min.js"></script>

    <script src="/s/js/chart.js"></script>
    <link rel="stylesheet" href="/s/css/common.css">
</head>

<style>
    .calendar-map {
        width: 100%;
    }
</style>

<body>
<nav class="nav">
    <button onclick="window.location='/s'">首页</button>
</nav>
<div id="calendarMap" class="calendar-map"></div>

<script>
    option = {
        title: {
            top: 15,
            left: 'center',
            text: '年度数据'
        },
        tooltip: {
            position: 'top',
            formatter: function (p) {
                let format = echarts.format.formatTime('yyyy-MM-dd', p.data[0]);
                return format + ': ' + p.data[1];
            }
        },
    };

    handleGet('/calendarMap', function (response) {
        // console.log(data.data)
        let calendar = []
        let topVal = -140
        for (let idx in response.data.styles) {
            topVal += 220
            calendar.push({
                left: '17%',
                right: 30,
                top: topVal,
                height: 170,
                width: 1300,
                cellSize: ['auto', 13],
                range: response.data.styles[idx].range,
                itemStyle: {
                    borderWidth: 4.1
                },
                yearLabel: {show: true},
                backgroundColor: '#fff'
            })
        }
        option.calendar = calendar
        document.getElementById("calendarMap").style.height = (calendar.length * 230) + 'px'
        option.series = response.data.maps

        option.visualMap = {
            min: 0,
            max: response.data.max,
            // type: 'piecewise',
            calculable: true,
            orient: 'vertical',
            // orient: 'horizontal',
            top: 'left',
            inRange: {
                color: ['#edffe9', '#dcffd3', '#bbffab',
                    '#9be9a8', '#40c463', '#30a14e', '#216e39'
                ]
            }
        }

        let chart = echarts.init(document.getElementById('calendarMap'));
        chart.setOption(option)
    })
</script>
</body>
</html>